import { VideoCategoryWrapper } from './style'
import { connect } from 'react-redux'
import { formatSeconds } from '../../utils/time'
import { Link, useSearchParams } from 'react-router-dom'
import classnames from 'classnames'
import { useEffect, useState } from 'react'

export function VideoCategory (props) {
  const { category } = props
  const [searchParams] = useSearchParams()
  const query = Object.fromEntries(searchParams.entries())

  // 是否高亮当前项
  function isActive (id) {
    return Number(query.p) === id
  }
  return (
    <VideoCategoryWrapper className='video-category'>
      <div className='video-category__header'>视频选集</div>
      <div className='video-category__content'>
        {
          category.map((item, index) => {
            return (
              <Link
                to={'/video/1?p=' + item.id}
                className={classnames('video-category-item', { active: isActive(item.id) })}
                key={item.id}>
                <div className="video-category-part">P{index + 1}</div>
                <div className="video-category-name">{item.name}</div>
                <div className="video-category-duration">{formatSeconds(item.duration)}</div>
              </Link>
            )
          })
        }
      </div>
    </VideoCategoryWrapper>
  )
}

const mapStateToProps = (state) => ({
  category: state.video.category
})

export default connect(mapStateToProps)(VideoCategory)